<template>
  <div class="search-popup">
    <!-- 搜索框 -->
    <van-search
      v-model="searchVal"
      show-action
      :placeholder="placeVal"
      @search="onSearch"
      @cancel="onCancel"
      @input="onInput"
    />

    <HistoryHot
      v-if="blockShow == 1"
      :historyKeywordList="historyKeywordList"
      :hotKeywordList="hotKeywordList"
      @tagClick="tagClick"
    />
    <SearchTipsList
      v-else-if="blockShow == 2"
      :searchTipsList="searchTipsList"
      @tagClick="tagClick"
    />
    <SearchProductList
      v-else-if="blockShow == 3"
      :searchTipsProductList="searchTipsProductList"
      :filterCategory="filterCategory"
      @categoryChange="categoryChange"
      @priceChange="priceChange"
    />
  </div>
</template>

<script>
import HistoryHot from "../components/home/HistoryHot";
import SearchTipsList from "../components/home/SearchTipsList";
import SearchProductList from "../components/home/SearchProductList";
import { GetHisHotData, GetSearchTipsData } from "@/request/api";
import { GetSearchTipsProductData } from "../request/api";

import { mapState, mapMutations } from "vuex";
export default {
  components: {
    HistoryHot,
    SearchTipsList,
    SearchProductList,
  },
  data() {
    return {
      searchVal: "",
      placeVal: "",
      // blockShow用来控制切换搜索页面对应的界面
      // blockShow == 1 表示历史记录热门
      // blockShow == 2 表示搜索提示列表
      // blockShow == 3 表示搜索产品列表
      blockShow: 1,

      // 历史记录
      historyKeywordList: [],

      // 热门搜索记录
      hotKeywordList: [],

      // 搜索提示
      searchTipsList: [],

      // 搜索列表的所有商品
      searchTipsProductList: [],

      // 获取分类
      filterCategory: [],

      // 由高到低或者低到高排序 默认desc由高到低
      order: "desc",

      // 可以是id或者price
      sort: "id",

      // 类别id，代表下拉菜单中的全部、居家等选项
      categoryId: 0,

      // 定时器
      timmer:null
    };
  },
  created() {
    GetHisHotData().then((res) => {
      // console.log(res.data);
      // 拿到搜索页的数据
      let { defaultKeyword, historyKeywordList, hotKeywordList } = res.data;
      this.placeVal = defaultKeyword.keyword; //搜索框数据
      this.historyKeywordList = historyKeywordList; //历史记录
      this.hotKeywordList = hotKeywordList; //热门记录
    });
  },
  methods: {
    // 历史记录 点击标签搜索
    tagClick(value) {
      this.onSearch(value);
      this.searchVal = value;
    },
    categoryChange(id) {
      this.categoryId = id;
      this.onSearch(this.searchVal);
    },
    priceChange(value) {
      this.sort = "price";
      this.order = value;
      this.onSearch(this.searchVal);
    },
    ...mapMutations({
      changeisShowShadow: "showshadow/changeisShowShadow",
    }),
    // 点击输入
    onSearch(value) {
      // value就是用户输入的值
      // 回车之后执行这里的代码
      // 搜索时
      this.blockShow = 3;

      // 发起搜索请求
      GetSearchTipsProductData({
        keyword: value,
        order: this.order, //告诉后端是由高到低或者低到高排序
        sort: this.sort, //告诉后端是按照id还是price排序
        categoryId: this.categoryId, //请求的分类id
      }).then((res) => {
        console.log(res.data);
        let { data, filterCategory } = res.data;
        this.searchTipsProductList = data;
        // this.filterCategory = filterCategory;

        // 这是后端给到的数据
        // 0: {id: 0, name: "全部", checked: true}
        // 1: {id: 1005001, name: "餐厨", checked: false}
        // 2: {id: 1005000, name: "居家", checked: false}

        // 这是我们想要的数据
        // 0: { text: "全部", value: 0, checked: true }
        // 0: { text: "餐厨", value: 1005001, checked: false }
        // 有时候后端给到的数据不是我们想要的格式
        // 所以就要将后端给到的数据处理成我们想要的格式
        let newArr = filterCategory.map((item) => {
          return { text: item.name, value: item.id, checked: item.checked };
        });
        console.log(newArr);
        this.filterCategory = newArr;
      });
      console.log("onSearch执行了", value);
    },
    // 点击取消
    onCancel() {
      // console.log("onCancel执行了");
      this.$router.go(-1);
      this.changeisShowShadow(false);
    },
    // 输入事件
    onInput(value) {
      //回调参数value表示用户当前输入的值---->看文档
      // 显示搜索提示列表

      // 判断  在每一次执行操作的时候，先判断定时器启动了没有，如果启动了，就要先清除定时器
      if(this.timmer){
        clearTimeout(this.timmer)
      }

      // 防抖 的优化
      this.timmer = setTimeout(() => {
        // console.log(value);
        this.blockShow = 2;
        //请求搜索提示列表数据
        GetSearchTipsData({ keyword: value })
          .then((res) => {
            if (res.errno == 0) {
              console.log(res.data);
              this.searchTipsList = res.data;
            }
          })
          .catch((err) => {
            console.log(err);
          });
      }, 500);
    },
  },
};
</script>
 
<style lang = "less" scoped>
.search-popup {
  width: 100%;
  height: 100%;
  background-color: #efefef;
  position: absolute;
  top: 0;
  z-index: 9;
}
</style>